<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用element-ui之前要先引入vue，他是基于vue的-->
    <script src="js/vuejs-2.5.16.js"></script>
    <!--引入element-ui的样式-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!--引入element-ui的js文件-->
    <script src="element-ui/lib/index.js"></script>
    <!--引入axios-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <el-dialog title="权限信息" :visible.sync="dialogFormVisible">
        <el-form :model="permission">
            <el-form-item label="权限名称" >
                <el-input v-model="permission.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="权限关键字" >
                <el-input v-model="permission.keyword" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="权限描述" >
                <el-input v-model="permission.description" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="doAddOrEdit">确 定</el-button>
        </div>
    </el-dialog>
    <div style="float: right">
        <el-button @click="toAdd" type="success">添加按钮</el-button>
    </div>
    <el-table
            :data="pagination.list"
            style="width: 100%">
        <!--prop数组中对象的属性名，label是显示的内容-->
        <el-table-column
                prop="name"
                label="权限名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="keyword"
                label="权限关键字"
                width="180">
        </el-table-column>
        <el-table-column
                prop="description"
                label="权限描述">
        </el-table-column>
        <el-table-column label="操作"
                         width="180">
            <template slot-scope="scope">
                <!--
                       scope.row 表示当前行的对象
                       scope.row.id 表示当前行对象的id
                   -->
                <el-button
                        @click="toEdit(scope.row.id)"
                        size="mini">编辑</el-button>
                <el-button
                        @click="doDelete(scope.row.id)"
                        size="mini"
                        type="danger">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.pageNum"
                :page-sizes="[3, 5, 8, 10]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
</div>
    <script>
        new Vue({
            el:"#app",
            data:{
                permissions:[],
                permission:{},
                pagination: {
                    pageNum: 1,//当前页码
                    pageSize: 5, //每页大小
                    list: [], //保存数据的数组
                    totalCount: 0 //总数据条数【随便写一个】
                },
                dialogFormVisible: false,
                addOrEdit: true
            },
            methods:{
                //分页查询方法
                findByPage() {
                    //定义url
                    let url = 'permission?action=findByPage&pageNum=' + this.pagination.pageNum + '&pageSize=' + this.pagination.pageSize;
                    //发送ajax异步请求
                    axios.get(url).then(resp => {
                        //获取响应数据
                        let result = resp.data;
                        //判断如果成功，进行赋值
                        if (result.success) {
                            //将数据【pagebean】赋值给pagination
                            console.log(result.obj);
                            this.pagination = result.obj;
                        } else {
                            //如果失败，弹框
                            alert(result.message);
                        }
                    });
                },
                //分页时，每页大小改变调用的方法
                handleSizeChange(pageSize) {
                    //修改分页数据模型中的每页大小
                    this.pagination.pageSize = pageSize;
                    //重新分页查询
                    this.findByPage();
                },
                //分页时，页码变化执行的函数
                handleCurrentChange(pageNum) {
                    //将数据模型中的页码进行改变
                    this.pagination.pageNum = pageNum;
                    //重新进行分页查询
                    this.findByPage();
                },

                findById(id) {
                    //定义url
                    let url = 'permission?action=findById&id=' + id;
                    //发送请求
                    axios.get(url).then(resp => {
                        //接收服务器回复过来的数据
                        let result = resp.data;
                        //判断是否成功
                        if (result.success) {
                            //如果成功了，将查询到的数据赋值给数据模型中的permission
                            this.permission = result.obj;
                        } else {
                            //弹框
                            alert(result.message);
                        }
                    });
                },
                //判断是新增还是查询的方法
                doAddOrEdit() {
                    if (this.addOrEdit) {
                        //如果标记是true，执行添加
                        this.doAdd();
                    } else {
                        //如果标记是false，就执行修改
                        this.doEdit();
                    }
                },
                toAdd() {
                    //将dialog标记改成添加的标记【true】
                    this.addOrEdit = true;
                    //把user对象的内容情况
                    this.user = {};
                    //弹出dialog窗口
                    this.dialogFormVisible = true;
                },
                doAdd() {
                    //定义url
                    let url = 'permission?action=add';
                    //发送请求
                    axios.post(url, this.permission).then(resp => {
                        //获取服务器响应的数据
                        let result = resp.data;
                        //判断
                        if (result.success) {
                            //添加成功，重新查询
                            this.findByPage();
                            //关闭弹出框
                            this.dialogFormVisible = false;
                        } else {
                            alert(result.message);
                        }
                    });
                },
                toEdit(id) {
                    //将dialog窗口的标记改成false表示在进行修改
                    this.addOrEdit = false;
                    //先根据id查询该用户
                    this.findById(id);
                    //弹框
                    this.dialogFormVisible = true;
                },
                doEdit() {
                    alert(JSON.stringify(this.permission));
                    //定义url
                    let url = 'permission?action=update';
                    //发送请求去修改
                    axios.post(url, this.permission).then(resp => {
                        //接收服务器回复的数据
                        let result = resp.data;
                        //判断
                        if(result.success) {
                            //成功，重新查询数据
                            this.findByPage();
                            //关闭弹出框
                            this.dialogFormVisible = false;
                        } else {
                            //弹框提示
                            alert(result.message);
                        }
                    });
                },



            },
            created(){
                this.findByPage();
            }
        })
    </script>
</body>
</html>